var _in = document.querySelector('.in');    //获取登录按钮
var _code = document.querySelector('.code');//获取整个验证码框
var _img = document.querySelector('.img'); //获取放背景图、验证码的框框
var _bg = document.querySelector('.bg');    //获取

_in.onclick = function () {          //点击登录后显示验证码框
    _bg.style.zIndex = 100;
    _bg.style.background = 'rgba(0, 0, 0, .7)';
    _code.style.opacity = 1;
    _code.style.height = 410 + 'px';
    _img.style.height = 320 + 'px';
}

// ---------------------------------------------------------------------------
var del = document.querySelector('.del');            //获取删除按钮
var _text = document.querySelector('.text');
var _ok = document.querySelector('.right');
var _good = document.querySelector('.good');
var reset = document.querySelector('.icon-shuaxin')

var textArr = ['一帆风顺', '无双', '安慕希', '四海八荒', '五福临门', '七星高照', '八仙过海', '九牛一毛']; //验证码为点击词语文字
var imgArr = [
    {
        _url: 'url(./1.png) no-repeat'
    },
    {
        _url: 'url(./2.png) no-repeat'
    },
    {
        _url: 'url(./3.png) no-repeat'
    },
    {
        _url: 'url(./4.png) no-repeat'
    },
    {
        _url: 'url(./5.gif) no-repeat'
    },
    {
        _url: 'url(./6.png) no-repeat'
    },
    {
        _url: 'url(./7.png) no-repeat'
    },
    {
        _url: 'url(./8.png) no-repeat'
    },
];
var _dic = '引丑巴孔队办以允予劝双书幻玉刊示末未击打巧正扑扒功扔去甘世古节本术可丙左厉右石布龙平灭轧东卡北占业旧帅归且旦目叶甲申叮电号田由史只央兄叼叫另叨叹四生失禾丘付仗代仙们仪白仔他斥瓜乎丛令用甩印乐句匆册犯外处冬鸟务包饥主市立闪兰半汁汇头汉宁穴它讨写让礼训必议讯记永司尼民出辽奶奴加召皮边发孕圣对台矛纠母幼丝式刑动扛寺吉扣考托老执巩圾扩扫地扬场耳共芒亚芝朽朴机权过臣再协西压厌在有百存而页匠夸夺灰达列死成夹轨邪划迈毕至此贞师尘尖劣光当早吐吓虫曲团同吊吃因吸吗屿帆岁回岂刚则肉网年朱先丢舌竹迁乔伟传乒乓休伍伏优伐延件任伤价份华仰限妹姑姐姓始驾参艰线练组细驶织终驻驼绍经贯奏春帮珍玻毒型挂封帘实试郎诗肩房诚衬衫视话诞询该详建肃录隶居届刷屈弦承孟孤陕降河沾泪油泊沿泡注泻泳泥沸波泼泽治怖性怕怜怪学宝宗定宜审宙官空京享店夜庙府底剂郊废净盲放刻育闸闹郑券卷单炒炊炕炎炉沫浅法泄斧爸采受乳贪念贫肤肺肢肿胀朋股肥服胁周昏鱼兔狐忽狗备饰饱饲变'; //混淆原文字
var randomText = null;
var verifyArr = []; //绑定下标 
var clickArr = [];  //点击生成下标
var space = null;
var count = 0;

// 初始化
start();

function start() {
    // 提示字
    randomText = textArr[rand(0, textArr.length)];
    _text.innerHTML = randomText;

    space = document.createElement('div');
    _img.appendChild(space);
    space.classList.add('space');

    // 背景图
    var imgUrl = imgArr[rand(0, imgArr.length)]._url;
    space.style.background = imgUrl;
    space.style.backgroundSize = '100% 100%';


    // 随机文字的定位
    // var _font = randomText;
    var _font = '';
    for (var i = 0; i < 5; i++){
        _font+=_dic[rand(0,_dic.length)]
    }
    _font =randomText+_font;
    for (var i in _font) {
        var x = rand(0, 280);
        var y = rand(0, 280);
        var rotate = rand(-60, 60);
        var _span = document.createElement('span');
        _span.innerHTML = _font[i];
        _span.classList.add('font');
        _span.setAttribute('index', i)
        _span.style.left = x + 'px';
        _span.style.top = y + 'px';
        _span.style.color = 'gray';
        _span.style.transform = `rotate(${rotate}deg)`;
        space.appendChild(_span);
    }

    // 绑定文字下标
    for (var i in randomText) {
        verifyArr.push(i);
    }

    // 点击绑定文字下标
    var fonts = document.querySelectorAll('.font');
    fonts.forEach(function (v) {
        v.onclick = function () {
            clickArr.push(v.getAttribute('index'));
            v.style.color = randColor();
        }
    })

    space.onclick = function (v) {
        var _break = document.querySelectorAll('#break');
        if (v.target.className === 'radio') {
            if (count > v.target.innerHTML * 1) {
                return
            }
            _break.forEach(function (v) {
                if (v.getAttribute('break') * 1 === count) {
                    v.style.color = 'gray';
                    v.removeAttribute('break');
                    clickArr.pop(v.getAttribute('index'))
            }
        })

            v.target.remove();
            count--;
           return

           
        }


        if (count === 10) {
            return
        }
        count++;
        var _radio = document.createElement('div');
        _radio.innerHTML = count;
        _radio.classList.add('radio');
        _radio.style.left = v.x - _code.offsetLeft - 18 + 'px';
        _radio.style.top = v.y - _code.offsetTop - 48 + 'px';
        space.appendChild(_radio);


        if (v.target.className === 'font') {
            if (v.target.getAttribute('break')) {
                clickArr.pop(v.target.getAttribute('index'));
            }
            v.target.setAttribute('break', count);
            v.target.id = 'break';
        }
        
    }
   


}

// 点击生成小圆圈



// 确定按钮
var flag = true;
_ok.onclick = function () {
    console.log(verifyArr);
    console.log(clickArr);
    if (flag) {
        flag = false;
        var q = setTimeout(function () {
            flag = true;
            clearTimeout(q);
        }, 1600)
        if (count === randomText.length) {
            if (verifyArr.join() === clickArr.join()) {
                _good.classList.add('over');
                _good.innerHTML = '验证成功';

                var t = setTimeout(function () {
                    _good.classList.remove('over');
                    _good.innerHTML = '';
                    del.onclick();
                    clearTimeout(t);
                }, 1600)

            }
            else {
                _return();
            }
        }
        else {
            _return();
        }
    }

    function _return() {
        _good.classList.add('out');
        _good.innerHTML = '验证失败';

        var k = setTimeout(function () {
            _good.classList.remove('out');
            _good.innerHTML = '';
            clearTimeout(k);
            reset.onclick();
        }, 1600)

    }
}


// 重置 
var _del=function() {
    space.remove();
    count = 0;
    verifyArr = [];
    clickArr = [];
    start();

}

// 刷新
var k = 0;
reset.onclick = function () {
    k++;
    if (k === 10) {
        alert('点击次数过多，请重试');
        del.onclick();
        k = 0;
    }
    else {
        _del();
    }



}

// 点击删除验证框
del.onclick = function () {
    _del();

    
    _code.style.opacity = 0;
    _bg.style.zIndex = 0;
    _code.style.height = 200 + 'px';
    _img.style.height = 100 + 'px';
    _bg.style.background = 'none';

}


// 随机数
function rand(min, max) {
    return parseInt(Math.random() * (max - min) + min)
}

// //随机颜色
function randColor() {
    var r = rand(0, 256);
    var g = rand(0, 256);
    var b = rand(0, 256);
    return `rgb(${r},${g},${b})`
}